<template>
    <div>
        <div v-if="mode === 'edit'">
            <el-select v-model="value1" multiple placeholder="请选择"
            @change="change"  :disabled="disabled"
            >
                <el-option
                  v-for="item in dataList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  >
                </el-option>
              </el-select>
        </div>
        <div v-else>
         {{ value }}
        </div>
    </div>
</template>
  
  <script>
  import datasource from '../../mixins/steps-datasource'
    export default {
        name: 'pm-selects',
        mixins: [datasource],
        props: {
            mode: {
            default: "edit", // 编辑模式和 edit， 展示模式 view
            },
            readonly: {
            type: Boolean,
            default: false,
            },
            disabled: {
            type: Boolean,
            default: false,
            },
        },
      data() {
        return {
          value1: [],
          dataList:[],
          disabled:false,
        }
      },
      watch:{
        options:{
        immediate:true,
        deep: true,
        handler(val){
            if(val && val.length){
                this.dataList = val.map(item=>{
                  return {
                  value:item.value,
                  label:item.label,
                  }
               })
            }
        }
        }
  },
  mounted() {
    if(this.value){
      this.value1 = this.value.split(',')
      if(this.mode == 'view'){
          this.disabled = true;
      }
    }
    
  },
  computed:{
    change () {
        this.$emit("input", this.value1.join(','))
        console.log('打印值：'+this.value1.join(','))
    }
  }
    }
  </script>